<template>
  <div class="commodity-box">
    <!-- 核算 -->
    <serchForm :Form="inventoryForm" :FormLabel="inventoryFormLabel" @onSearch="onSearch"/>
    <forTableCom :bg="bg" :color="color" :idActive="idActive" :limit="pageSize" :page="pageNum"
                 :tableData="inventoryTableData"
                 :tableHeaderData="inventoryTableHeaderData" :total="totals" @handleChange="handleChange"
                 @handleSelectionChange="handleSelectionChange" @updateLimit="updateLimit" @updatePage="updatePage">

      <el-table-column :align="'center'" :fixed="'right'" :min-width="'150px'" class-name="operate" label="操作">
        <template #default="scope">
          <el-button v-show="scope.row.type == '未下单'" style="padding:8px 10px;"
                     @click="goPlaceOrder(scope.row)">下单
          </el-button>
          <el-button v-show="scope.row.type == '未下单'" style="padding:8px 10px;"
                     @click="goMeasurement(scope.row)">详情
          </el-button>
        </template>
      </el-table-column>
    </forTableCom>
  </div>
</template>
<script setup>
import serchForm from '@/components/inventory/serchForm.vue';
import forTableCom from '@/components/forTableCom/index.vue';
import {getoutsourcingApi, getproductsApi} from '@/api/tickets/index'
import {apiDataStore} from '@/store/modules/apiData'
import {costingList} from '@/api/costSum';
import {defineEmits, onMounted, ref} from 'vue';
import {useRouter} from 'vue-router'

const apiStore = apiDataStore()


const emit = defineEmits(['goMeasurement'])
const router = useRouter()
// 弹窗
let flag = ref(false)
// 详情禁用
let disabled = ref(false)
// 勾选激活行的背景色
const idActive = 'costingId'


// 表单
let inventoryForm = ref(
    {
      createTime: '',    // 核算日期
      terminalName: '',      // 终端名称
      customerId: '',       // 客户名称
    }
)
// 表单数据标题
let inventoryFormLabel = ref([

  {
    name: 'createTime',
    label: '核算日期',
    type: 'picker'
  },
  {
    name: 'terminalName',
    label: '终端名称'
  },
  {
    name: 'customerId',
    label: '客户名称',
    type: 'customer'
  },
])
// 查找suppliersName
const onSearch = (v) => {
  pageNum.value = 1
  costingListFn(v)
}
// 表格
let color = ref('#333')
let bg = ref('#d9d9d93b')
// 总条目数   pageSize 加 1
let totals = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 存储勾选框的对象
let multipleSelection = ref([])


// 表格表头数据
let inventoryTableHeaderData = ref([
  {
    prop: 'costingId',
    label: '核算编号',
    minwidth: '100px'
  },
  {
    prop: 'measurementId',
    label: '测量编号',
    minwidth: '100px'
  },
  {
    prop: 'orderId',
    label: '单据编号',
    minwidth: '200px'
  },
  {
    prop: 'measurement.mtype',
    label: '类型',
    minwidth: '100px'
  },

  {
    prop: 'terminalName',
    label: '终端名称',
    minwidth: '150px'
  },
  {
    prop: 'customerName',
    label: '客户名称',
    minwidth: '150px'
  },
  {
    prop: 'manufacturerContact',
    label: '厂家负责人',
    minwidth: '150px'
  },
  {
    prop: 'businessSurveyorName',
    label: '经营测量人员',
    minwidth: '150px'
  },
  {
    prop: 'createTime',
    label: '核算日期',
    minwidth: '200px'
  },
  {
    prop: 'moneyGross',
    label: '毛利率'
  },
  {
    prop: 'moneyRatio',
    label: '利润率',
  },
  {
    prop: 'moneyProfit',
    label: '净利润',
  },
  {
    prop: 'type',
    label: '状态',
  },
])
// 表格数据内容
let inventoryTableData = ref([])

// 选中的列
const handleSelectionChange = (v) => {
  multipleSelection.value = v
}

// 分页器大小  当前分页器
const handleChange = (v) => {
  let {page, limit} = v.page
  pageNum.value = page
  pageSize.value = limit

  let params = inventoryForm.value
  costingListFn(params)
}
// 当前页面位置发生变化
const updatePage = (v) => {
  console.log(v);
}
// 条目个数发生变化
const updateLimit = (v) => {
  console.log(v);
}


// 查询接口
const costingListFn = async (data = {}) => {
  let page = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  }
  let params = Object.assign(data, page)
  let res = await costingList(params)
  let {code, rows, total} = res
  if (code == 200) {
    console.log(rows);
    inventoryTableData.value = rows
    inventoryTableData.value.forEach((v, i) => {
      v.terminalName = rows[i].measurement.terminalName
      v.manufacturerContact = rows[i].measurement.manufacturerContact
      v.businessSurveyor = rows[i].measurement.businessSurveyor
      v.businessSurveyorName = rows[i].measurement.businessSurveyorName
    })
    totals.value = total
  }
}

// 封装请求下拉菜单信息
const getDropDownData = (res) => {
  let {code, data} = res
  if (code == 200) {
    return data
  }
}
// 获取存货下拉菜单数据
const getproductsApiData = async (data = '') => {
  if (apiStore.stocksData.length > 0) return
  let params = {deptName: data}
  let res = await getproductsApi(params)
  apiStore.stocksData = getDropDownData(res)
}
// 获取外协下拉菜单数据
const getoutsourcingApiData = async (data = '') => {
  if (apiStore.selectExternalDate.length > 0) return
  let params = {deptName: data}
  let res = await getoutsourcingApi(params)
  apiStore.selectExternalDate = getDropDownData(res)
}

// 去测量
const goMeasurement = (v) => {
  emit('goMeasurement', v)
}

// 去下单
const goPlaceOrder = (v) => {
  // router.push({
  //     path: '/tickets/newOrders',
  //     query: { v: encodeURIComponent(JSON.stringify(v)) }
  // })
  router.push('/tickets/newOrders')
  localStorage.setItem('leimu', JSON.stringify(v))
}

onMounted(() => {
  costingListFn()
  getproductsApiData()
  getoutsourcingApiData()
})
</script>
<style lang='scss' scoped>
.commodity-box {
  padding: 16px;
}
</style>
